<template>
  <div
    @click.stop="$emit('close', false)"
    class="mask flex_row flex_align_center flex_center_jc"
    v-if="visible"
  >
    <div @click.stop class="popup_patriarch flex_column flex_align_center">
      <input
        @click.stop
        type="password"
        placeholder="请输入家长密码"
        v-model="val"
      />

      <button class="btn" @click.stop="$emit('confirm', val)">确认</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      Type: Boolean,
      default: false,
    },
    value: {
      Type: String,
      default: "",
    },
  },
  watch: {
    value: {
      immediate: true,
      handler: function (nV) {
        this.val = nV;
      },
    },
    val(nV) {
      this.$emit("input", nV);
    },
    visible(nV) {
      if (nV == false) {
        this.$emit("close", nV);
      }
    },
  },
  data() {
    return {
      val: "",
    };
  },
};
</script>

<style lang="less" scoped>
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  background-color: rgba(0, 0, 0, 0.5);
  .popup_patriarch {
    width: 80%;
    height: 130px;
    border-radius: 10px;
    background-color: #fff;
    input {
      border-radius: 2px;
      outline: none;
      margin-top: 20px;
      font-size: 18px;
        font-size: 13px;
        border: 1px solid #ddd;
      &::-webkit-input-placeholder {
        font-size: 13px;
      }
    }
    button {
      width: 150px;
      height: 30px;
      line-height: 30px;
      font-size: 16px;
      margin-top: 20px;
    }
  }
}
</style>